<template>
  <div class="wrapper">
    <!-- 顶部导航 -->
    <header>
      <i class="fa fa-arrow-left" @click="goBack"></i>
      <div class="title">评价订单</div>
      <div class="placeholder"></div>
    </header>

    <!-- 商家信息 -->
    <div class="business-info" v-if="businessInfo">
      <img :src="handleImageUrl(businessInfo.businessImg)" :alt="businessInfo.businessName" @error="handleImageError">
      <h3>{{ businessInfo.businessName }}</h3>
    </div>

    <!-- 评分部分 -->
    <div class="rating-section">
      <h4>商家评分</h4>
      <div class="stars">
        <i 
          v-for="index in 5" 
          :key="index"
          :class="['fa', index <= rating ? 'fa-star' : 'fa-star-o']"
          @click="rating = index"
        ></i>
        <span class="rating-text">{{ getRatingText(rating) }}</span>
      </div>
    </div>

    <!-- 评价内容 -->
    <div class="review-content">
      <h4>评价内容</h4>
      <el-input
        v-model="content"
        type="textarea"
        :rows="4"
        placeholder="请输入您的评价内容(最少10个字)..."
        maxlength="200"
        show-word-limit
      />
    </div>

    <!-- 订单商品列表 -->
    <div class="order-items" v-if="orderDetails.length">
      <h4>订单商品</h4>
      <div class="item" v-for="item in orderDetails" :key="item.foodId">
        <span>{{ item.foodName }}</span>
        <span>x{{ item.quantity }}</span>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-btn">
      <el-button type="primary" @click="submitReview" :loading="submitting">
        提交评价
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getBusinessByIdService } from '../api/business';
import { getOrderById } from '../api/orders';
import { createReview } from '../api/review';
import { useUserInfoStore } from '../stores/user';
import { handleImageUrl } from '../utils/imageUtils';
import defaultImg from '../assets/img/default.png';

const router = useRouter();
const route = useRoute();
const userStore = useUserInfoStore();

// 状态数据
const businessInfo = ref(null);
const orderDetails = ref([]);
const rating = ref(5);
const content = ref('');
const submitting = ref(false);
const orderId = ref(null);

// 获取评分对应的文字描述
const getRatingText = (rating) => {
  const ratingTexts = {
    1: '非常差',
    2: '差',
    3: '一般',
    4: '好',
    5: '非常好'
  };
  return ratingTexts[rating] || '';
};

// 初始化数据
const initData = async () => {
  try {
    orderId.value = route.query.orderId;
    
    if (!orderId.value) {
      ElMessage.error('订单信息不完整');
      router.back();
      return;
    }

    // 获取订单信息
    const orderRes = await getOrderById(orderId.value);
    if (orderRes.code === 0 && orderRes.data) {
      const orderData = orderRes.data;
      
      // 检查订单是否已评价
      if (orderData.isReviewed) {
        ElMessage.warning('该订单已评价');
        router.back();
        return;
      }

      // 获取商家信息
      const businessRes = await getBusinessByIdService({ businessId: orderData.businessId });
      if (businessRes.code === 0) {
        businessInfo.value = businessRes.data;
      }

      // 设置订单详情
      if (Array.isArray(orderData.orderDetailList)) {
        orderDetails.value = orderData.orderDetailList;
      }
    } else {
      ElMessage.error('获取订单信息失败');
      router.back();
    }
  } catch (error) {
    console.error('初始化数据失败:', error);
    ElMessage.error('获取数据失败');
    router.back();
  }
};

// 返回方法
const goBack = () => {
  router.push({
    path: '/order',
    query: { tab: 3 } // tab=3 对应已完成标签页
  });
};

// 提交评价
const submitReview = async () => {
  if (rating.value === 0) {
    ElMessage.warning('请选择评分');
    return;
  }

  if (!content.value.trim() || content.value.length < 10) {
    ElMessage.warning('评价内容至少需要10个字');
    return;
  }

  try {
    submitting.value = true;
    
    const reviewData = {
      orderId: orderId.value,
      userId: userStore.userInfo.id,
      rating: rating.value,
      comment: content.value.trim()
    };
    
    const res = await createReview(reviewData);
    
    if (res.code === 0) {
      ElMessage.success('评价成功');
      router.push({
        path: '/order',
        query: { tab: 3 }
      });
    } else {
      ElMessage.error(res.msg || '评价失败');
    }
  } catch (error) {
    console.error('提交评价失败:', error);
    ElMessage.error('提交评价失败');
  } finally {
    submitting.value = false;
  }
};

// 处理图片加载错误
const handleImageError = (event) => {
  event.target.src = defaultImg;
};

onMounted(() => {
  initData();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20vw;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vw 4vw;
  background-color: #ff7043;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .fa-arrow-left {
  font-size: 4vw;
  color: #fff;
  width: 8vw;
  cursor: pointer;
}

header .title {
  font-size: 4.5vw;
  font-weight: bold;
  color: #fff;
}

header .placeholder {
  width: 8vw;
}

.business-info {
  background: #fff;
  padding: 4vw;
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}

.business-info img {
  width: 15vw;
  height: 15vw;
  border-radius: 2vw;
  margin-right: 3vw;
}

.business-info h3 {
  font-size: 4vw;
  color: #333;
}

.rating-section,
.review-content,
.order-items {
  background: #fff;
  padding: 4vw;
  margin-bottom: 3vw;
}

.rating-section h4,
.review-content h4,
.order-items h4 {
  font-size: 3.8vw;
  color: #333;
  margin-bottom: 3vw;
}

.stars {
  display: flex;
  gap: 2vw;
}

.stars i {
  font-size: 6vw;
  cursor: pointer;
}

.fa-star {
  color: #ffd700;
}

.fa-star-o {
  color: #ddd;
}

.order-items .item {
  display: flex;
  justify-content: space-between;
  padding: 2vw 0;
  font-size: 3.5vw;
  color: #666;
  border-bottom: 1px solid #eee;
}

.order-items .item:last-child {
  border-bottom: none;
}

.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3vw 4vw;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.submit-btn :deep(.el-button) {
  width: 100%;
  background-color: #ff7043;
  border-color: #ff7043;
}

.submit-btn :deep(.el-button:hover) {
  background-color: #ff8a65;
  border-color: #ff8a65;
}

.rating-text {
  margin-left: 2vw;
  font-size: 3.5vw;
  color: #666;
}
</style> 